<template>
  <section class="page-container">
    <el-divider content-position="left">
      <section class="divider-wrap">
        <span>富文本编辑器</span>
        <el-popover
          placement="bottom-start"
          title=""
          :width="400"
          trigger="hover"
        >
          <p>
            富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见
            <el-link
              href="https://www.wangeditor.com/"
              type="primary"
              target="_blank"
            >
              wangeditor 文档
            </el-link>
          </p>
          <template #reference>
            <el-icon><info-filled /></el-icon>
          </template>
        </el-popover>
      </section>
    </el-divider>

    <section class="editor-wrap">
      <toolbar
        :editor="editorRef"
        :default-config="toolbarConfig"
        :mode="mode"
        class="toolbar-container"
      />
      <editor
        v-model="valueHtml"
        :default-config="editorConfig"
        :mode="mode"
        style="height: calc(100% - 100px); overflow-y: hidden;"
        class="editor-container"
        @on-created="handleCreated"
        @on-change="handleChange"
        @on-destroyed="handleDestroyed"
        @on-focus="handleFocus"
        @on-blur="handleBlur"
        @custom-alert="customAlert"
        @custom-paste="customPaste"
      />
    </section>
  </section>
</template>

<script lang="ts">
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import {
  defineComponent, onMounted, ref, shallowRef, onBeforeUnmount,
} from 'vue';

import { InfoFilled } from '@element-plus/icons-vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { ElMessage } from 'hive-plus';

export default defineComponent({
  name: 'RichText',
  components: {
    InfoFilled,
    Editor,
    Toolbar,
  },
  setup() {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef();
    // 内容 HTML
    const valueHtml = ref('<p>hello rick text</p>');

    onMounted(() => {
      setTimeout(() => {
        valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>';
      }, 1000);
    });

    const toolbarConfig = {};
    const editorConfig = { placeholder: '请输入内容...' };

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (!editor) { return; }
      editor.destroy();
    });

    // 编辑器回调函数
    const handleCreated = (editor:any) => {
      console.log('created', editor);
      editorRef.value = editor; // 记录 editor 实例，重要！
    };

    const handleChange = (editor:any) => {
      console.log('change:', editor.getHtml());
    };

    const handleDestroyed = (editor:any) => {
      console.log('destroyed', editor);
    };

    const handleFocus = (editor:any) => {
      console.log('focus', editor);
    };

    const handleBlur = (editor:any) => {
      console.log('blur', editor);
    };

    const customAlert = (info:TypeObject, type:TypeObject) => {
      ElMessage.warning(`【自定义提示】${type} - ${info}`);
    };
      /*
       * 自定义插入内容
       * editor.insertText('xxx');
       * 返回值（注意，vue 事件的返回值，不能用 return）
       * callback(false); // 返回 false ，阻止默认粘贴行为
       */
    const customPaste = (editor:any, event:Event, callback:Func) => {
      console.log('ClipboardEvent 粘贴事件对象', editor, event);
      callback(true); // 返回 true ，继续默认的粘贴行为
    };

    return {
      editorRef,
      valueHtml,
      mode: 'default', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
      handleChange,
      handleDestroyed,
      handleFocus,
      handleBlur,
      customAlert,
      customPaste,
    };
  },
});
</script>

<style lang="scss" scoped>
:deep(.#{$namespace}-divider--horizontal) {
  margin-top: 16px;
  margin-bottom: 16px;
}

.divider-wrap {
  display: flex;
  align-items: center;

  .hover {
    cursor: pointer;
  }
}

.page-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  .editor-wrap {
    flex: 1;

    .toolbar-container {
      border-bottom: 1px solid var(--maia-color-grey-base);
    }
  }
}
</style>
